<template>
  <div class="personal-center">
    <!-- 顶部标题 -->
    <h1 class="center-title">个人中心</h1>

    <div class="container">
      <!-- 左侧导航菜单 -->
      <div class="sidebar">
        <div class="menu-section">
          <h3>订阅中心</h3>
          <ul>
            <li><router-link to="/order">我的订单</router-link></li>
            <li><router-link to="">评价晒单</router-link></li>
            <li><router-link to="">话费充值订单</router-link></li>
            <li><router-link to="">以旧换新订单</router-link></li>
          </ul>
        </div>

        <div class="menu-section">
          <h3>个人中心</h3>
          <ul>
            <li class="active"><router-link to="">我的个人中心</router-link></li>
            <li><router-link to="">消息通知</router-link></li>
            <li><router-link to="">购买资格</router-link></li>
            <li><router-link to="">现金账户</router-link></li>
            <li><router-link to="">小米礼品卡</router-link></li>
            <li><router-link to="">现金券</router-link></li>
            <li><router-link to="">喜欢的商品</router-link></li>
            <li><router-link to="">优惠券</router-link></li>
            <li><router-link to="">收货地址</router-link></li>
            <li><router-link to="">红包</router-link></li>
          </ul>
        </div>

        <div class="menu-section">
          <h3>售后服务</h3>
          <ul>
            <li><router-link to="">服务记录</router-link></li>
            <li><router-link to="">申请服务</router-link></li>
            <li><router-link to="">领取快递报销</router-link></li>
          </ul>
        </div>
        <div class="menu-section">
          <h3>账户管理</h3>
          <ul>
            <li><router-link to="/zhanghao">个人信息</router-link></li>
            <li><router-link to="/zhanghao">修改密码</router-link></li>
            <li><router-link to="">注销服务</router-link></li>
          </ul>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="content">
        <!-- 用户信息 -->
        <div class="user-info-card" v-if="users">
    <div class="user-header">
      <div class="avatar-wrapper">
        <img 
          :src="getAvatarUrl(users.head)" 
          alt="用户头像"
          class="user-avatar"
          @error="handleImageError"
        >
      </div>
      <div class="user-info-text">
        <div class="user-id">ID: {{ users.username }}</div>
        <div class="greeting">{{ getGreeting() }}</div>
      </div>
      <router-link to="/zhanghao" class="edit-link">修改个人信息 ></router-link>
    </div>

    <div class="security-info">
      <div class="security-item">
        <span>账户安全：</span>
        <span class="security-level high">较高</span>
      </div>
      <div class="security-item">
        <span>绑定手机：</span>
        <span>{{ formatPhone(users.phone) }}</span>
      </div>
      <div class="security-item">
        <span>绑定邮箱：</span>
        <span>{{ formatEmail(users.email) }}</span>
      </div>
    </div>
  </div>

        <!-- 订单状态卡片 -->
        <div class="status-cards">
          <div class="status-card">
            <div class="status-title">待支付的订单：<span class="count">0</span></div>
            <router-link to="" class="view-link">查看待支付订单 ></router-link>
          </div>

          <div class="status-card">
            <div class="status-title">待收货的订单：<span class="count">0</span></div>
            <router-link to="" class="view-link">查看待收货订单 ></router-link>
          </div>

          <div class="status-card">
            <div class="status-title">待评价商品数：<span class="count">1</span></div>
            <router-link to="" class="view-link">查看待评价商品 ></router-link>
          </div>

          <div class="status-card">
            <div class="status-title">喜欢的商品：<span class="count">3</span></div>
            <router-link to="" class="view-link">查看喜欢的商品 ></router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const users = ref(null);
const defaultAvatar = 'https://s01.mifile.cn/i/default-avatar.png'; // 小米默认头像

// 获取头像URL
const getAvatarUrl = (avatarPath) => {
  if (!avatarPath) return defaultAvatar;
  // 如果已经是完整URL则直接使用
  if (avatarPath.startsWith('http')) return avatarPath;
  // 否则使用API接口路径
  return `http://127.0.0.1:3000/head/${avatarPath}`;
};

// 头像加载失败处理
const handleImageError = (e) => {
  e.target.src = defaultAvatar;
};

// 格式化手机号
const formatPhone = (phone) => {
  if (!phone) return '未绑定';
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
};

// 格式化邮箱
const formatEmail = (email) => {
  if (!email) return '未绑定';
  return email.replace(/(\w{3})\w+(\w{4})@(\w{2,3}\.\w{2,3})/, '$1****$2@$3');
};


// 获取问候语
const getGreeting = () => {
  const hour = new Date().getHours();
  if (hour < 6) return '凌晨好~';
  if (hour < 9) return '早上好~';
  if (hour < 12) return '上午好~';
  if (hour < 14) return '中午好~';
  if (hour < 18) return '下午好~';
  return '晚上好~';
};

onMounted(() => {
  if (sessionStorage.getItem('user')) {
    const user = JSON.parse(sessionStorage.getItem('user'));
    users.value = user;
    console.log('用户数据:', users.value); // 调试用
  }else{
    alert('请先登录');
    router.push('/login')
  }
});
</script>

<style scoped>
.avatar-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ff6700;
  margin-right: 15px;
}

.user-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-header {
  display: flex;
  align-items: center;
}

.user-info-text {
  flex-grow: 1;
}

.greeting {
  font-size: 16px;
  color: #333;
  margin-top: 5px;
}
.personal-center {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20px 0;
}

.center-title {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: normal;
}

.container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sidebar {
  width: 220px;
  padding: 20px;
  border-right: 1px solid #e0e0e0;
}

.menu-section {
  margin-bottom: 30px;
}

.menu-section h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  padding-left: 10px;
  font-weight: normal;
}

.menu-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-section li {
  margin-bottom: 5px;
}

.menu-section li a {
  display: block;
  padding: 10px;
  color: #666;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.menu-section li a:hover {
  background-color: #f5f5f5;
  color: #ff6700;
}

.menu-section li.active a {
  background-color: #ff6700;
  color: white;
}

.content {
  flex: 1;
  padding: 20px;
}

.user-info-card {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.user-id {
  font-size: 14px;
  color: #999;
  margin-right: 15px;
}

.greeting {
  font-size: 16px;
  color: #333;
  flex-grow: 1;
}

.edit-link {
  font-size: 14px;
  color: #ff6700;
  text-decoration: none;
}

.security-info {
  padding: 10px 0;
}

.security-item {
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.security-level {
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 12px;
}

.security-level.high {
  background-color: #e1f5fe;
  color: #0288d1;
}

.status-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.status-card {
  background: #fff;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.status-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.count {
  color: #ff6700;
  font-weight: bold;
}

.view-link {
  font-size: 14px;
  color: #ff6700;
  text-decoration: none;
  display: inline-block;
  margin-top: 5px;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }

  .status-cards {
    grid-template-columns: 1fr;
  }
}
</style>